<nz-drawer
  [nzBodyStyle]="{ overflow: 'auto' }"
  [nzWidth]="650"
  [nzVisible]="drawerVisible"
  [nzTitle]="title"
  [nzFooter]="footerTpl"
  (nzOnClose)="closeDrawer()"
  (nzVisibleChange)="onVisibilityChange($event)"
>
  <form nz-form *nzDrawerContent [formGroup]="form">
    <nz-form-item>
      <nz-form-label>模板名称</nz-form-label>
      <nz-form-control [nzErrorTip]="'模板名称是必填项!'">
        <input nz-input placeholder="模板名称" [formControlName]="'name'"/>
      </nz-form-control>
    </nz-form-item>

    <span nz-typography class="fw-bold">已选任务 ({{tasks.length || 0}})</span>
    <br>
    <ul nz-list nzBordered class="mt-4" [nzDataSource]="tasks" *ngIf="tasks.length" [nzLoading]="loading"
        nzNoResult="未选择任务!">
      <li nz-list-item *ngFor="let task of tasks; let i = index;">
        <ul nz-list-item-actions>
          <nz-list-item-action>
            <a (click)="removeTask(i)">移除</a>
          </nz-list-item-action>
        </ul>
        {{task.name}}
      </li>
    </ul>
  </form>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="closeDrawer()">取消</button>
      <button nz-button nzType="primary" (click)="submit()">保存</button>
    </div>
  </ng-template>
</nz-drawer>